<template>
<div class="wrap">
	<title1 name="生活一家">
		<span slot="left1" class="left1" id="tabcity"><span id="chooseCity">广州</span><img src="../../assets/up.png" alt=""></span>
		<span slot="right1" class="right1">
			<img src="../../assets/fa.png" alt="">
		</span>
	</title1>
	<div class="content">
		<!-- swiper模板 -->
		<swi></swi>
		<div class="padd">
			<div class="fw">
				<div>
					<router-link to="/home/jcsh"><img src="../../assets/index/x1.jpg" alt="" class="x1"></router-link>	
				</div>
				<div>
					<p><router-link to="/home/shsp"><img src="../../assets/index/x2.jpg" alt="" class="x2"></router-link></p>
					<p><router-link to="/home/shsp"><img src="../../assets/index/x3.jpg" alt=""></router-link></p>
				</div>
				<div>
					<p><router-link to="/home/shsp"><img src="../../assets/index/x4.jpg" alt=""></router-link></p>
					<p><router-link to="/home/shsp"><img src="../../assets/index/x5.jpg" alt=""></router-link></p>
				</div>
				
			</div>
			<transition name="s">
				<router-view></router-view>
			</transition>
			<div class="sales">
				<div class="stit">
					<p></p>
					<p>特卖专区 Sales</p>
					<p></p>
				</div>
				<!-- pri模板 -->
				<pri></pri>

			</div>
		</div>
	</div>
</div>
</template>

<script scoped>
import Title1 from '@/components/title'//加载模板
import Pri from '@/components/pri'
import Swi from '@/components/swi'
import '../../../static/css/index.css'
import '../../../static/css/MultiPicker.css'
import "../../../static/js/MultiPicker.js"
import "../../../static/js/city.js"
export default {//返回模板
	components:{//注册模板
		Title1,Pri,Swi
	},
	// ajx:function  () {
	// 	this.$http.post("http://192.168.31.183/ajax2/getimg.php",{}{emulateJSON:true}).then(function  (rs) {
	// 		console.log(rs.body)
	// 	})
	// },
	//大图滚动
	// mounted (){
	// var wiper = new Swiper(".wrap_slide",{
	// pagination: true,//true加切换点按钮，false就不加，默认false
	// next:".right",//指定下一张按钮
	// prev:".left",//指定上一张按钮
	// loop:true,
	// autoplay:2000
	// })
	// },
	// meunted:function   {//生命周期
	// 	var wiper = new Swiper(".wrap_slide",{
	// 	pagination: true,//true加切换点按钮，false就不加，默认false
	// 	next:".right",//指定下一张按钮
	// 	prev:".left",//指定上一张按钮
	// 	loop:true,
	// 	autoplay:2000
	// 	})
	// },
	// meunted:function  () {
	// 	new MultiPicker({
 //        input: 'tabcity', //点击触发插件的input框的id
 //        container: 'chooseCity', //插件插入的容器id
 //        jsonData: $city,
 //        success: function(arr) {
 //                // Shop(arr[0].id);
 //            $('#tabcity').val(arr[0].value);
 //        } //回调
 //    })
	// },
	mounted:function  () {
		// new MultiPicker({
  //       input: 'tabcity', //点击触发插件的input框的id
  //       container: 'chooseCity', //插件插入的容器id
  //       jsonData: $city,
  //       success: function(arr) {
  //           document.getElementById('showBlock2').innerHTML = JSON.stringify(arr);  
  //       } //回调
  //   })
	},
	methods:{
	
	},
}

</script>

<style scoped>
.left1{position: absolute;left: .1rem;}
.left1 img{width: .13rem; vertical-align: middle;margin-left: .04rem}
.right1{position: absolute;right: .1rem;top: .05rem;}
.right1 img{height: .25rem;}
.content .padd{padding: 0 .1rem;}
/*.s{transform:translate3d(100%,0,0)}*/
.s-enter-active{
	animation:enter 0.5s;
}
@keyframes enter{
	from{transform: translate3d(100%,0,0);}
	to{transform: translate3d(0%,0,0);}
}
.s-leave-active{
	animation:leave 0.5s;
}
@keyframes leave{
	from{transform: translate3d(0%,0,0);}
	to{transform: translate3d(100%,0,0);}
}
</style>